<template>
	<div class="topic-detail" ref="detailRef">
		<el-card class="container">
			<div class="topic-detail-title">{{data.title}}</div>
			<div class="info-bar">
				<div style="display: flex; align-items: center;">
					<el-text>
						<el-icon><Timer/></el-icon>
						{{createTime}}
					</el-text>
				</div>
				<div style="display: flex; align-items: center;">
					<el-text style="margin-right: 20px;" @click="like">
						👍{{data.like_count}}
					</el-text>
					<el-text>
						<el-icon><Grid /></el-icon>
						{{data.board_name}}
					</el-text>
				</div>
			</div>
			<div v-html="data.content" class="content"></div>
		</el-card>

		<el-card class="container">
			<div class="subtitle">评论({{replieTotal}}):
				<el-button size="small" type="primary" style="margin-left: 10px" icon="plus" @click="openinput('请输入内容')">说点什么</el-button>
			</div>
			<el-row :gutter="24" style="margin-top: 14px;" v-if="showInput">
				<el-col :span="24">
					<el-input v-model="reviewForm.content" type="textarea" :placeholder="inputPlaceholder" style="width: 100%;" maxlength="300" show-word-limit></el-input>
				</el-col>
			</el-row>
			<el-row :gutter="24" style="margin-top: 8px;" v-if="showInput">
				<el-col :span="24">
					<el-button type="primary" @click="reply">发表</el-button>
				</el-col>
			</el-row>
			<template v-if="replies.length > 0">
				<ReplieItem v-for="item in replies" :data="item" :topic_id="data.id" @reloadReply="reloadReply"/>
				<div style="text-align: center; margin-top: 14px; color: #D4D7DE;">已经到底了~~~</div>
			</template>
			<el-empty description="暂时还没有评论哦!" v-else></el-empty>

		</el-card>


		<!--个人信息卡片-->
		<UserInfoCard class="userInfo" :showPost="false"/>
		<!--评论表情弹窗-->
		<Emoji v-model="emojiShow" @change="emojiChange"/>
	</div>
</template>
<script setup lang="ts">
import {ref,reactive, onMounted,onUnmounted, computed} from 'vue'
import dayjs from "dayjs";
import {Timer} from "@element-plus/icons-vue";
import {topic_like, topic_replies, reply_list, view_topic} from '/@/api/forum.ts'
import {useMessage} from "/@hooks/message";
import Emoji from '/@/components/EmojiModel/index.vue'
import UserInfoCard from "./component/UserInfoCard.vue";
import {useUserConfig} from '/@/stores/UserInfoConfig'
import ReplieItem from "./component/ReplieItem.vue";


const stores = useUserConfig()

//用于监听页面滚动
const detailRef = ref(null)


// 发表评论的输入框控制
const showInput = ref(false)
const inputPlaceholder = ref('请输入内容')
const openinput = (placeholder: string)=> {
	showInput.value = !showInput.value
	inputPlaceholder.value = placeholder
}

//回复列表
const replies = ref([])
const replieTotal = ref(0)
const repliesParams = reactive({
	topic_id: '',
	page: 1,
	page_size: 10,
})
const getReplyList = async ()=> {
	const res = await reply_list(repliesParams)
	replies.value = [...replies.value, ...res.data.replies]
	replieTotal.value = res.data.total
}
const reloadReply = ()=> {
	replies.value = []
	repliesParams.page = 1;
	getReplyList()
}

//发表回复的参数
const reviewForm = reactive({
	content: '',
	topic: '',
	author: '',
	parent: '',
})

//发起回复
const reply = async ()=> {
	if(reviewForm.content === ''){
		useMessage().error('回复不能为空!')
		return;
	}else {
		const res = await topic_replies(reviewForm)
		reviewForm.content = ''
		reviewForm.parent = ''
		repliesParams.page = 1
		replies.value =[]
		getReplyList()
	}
}

const emojiShow = ref(false)
const emojiChange = (emoji:string) =>{
	reviewForm.content = reviewForm.content + emoji
}

//点赞数
const startCount = ref(0)

//是否点赞
const isStart = ref(false)

async function like(){
	if(isStart.value){
		startCount.value--
	}else{
		startCount.value++
		const res = await topic_like(data.value.id)
		if(res.code == 200){
			startCount.value = res.data.like_count
			useMessage().success('点赞成功')
		}else{
			useMessage().error(res.msg)
		}
	}
	isStart.value = !isStart.value
}


const data = ref({})
onMounted(()=> {
	const detail = window.localStorage.getItem('topicDetail')
	if(detail){
		data.value = JSON.parse(detail)
		startCount.value = data.value.like_count
		reviewForm.topic = data.value.id
		reviewForm.author = stores.userInfo.id
		repliesParams.topic_id = data.value.id
		getReplyList()
		//主题浏览量增加
		view_topic(data.value.id)
	}
})

const createTime = computed(()=> {
	return dayjs(data.value.created_at).format('YYYY-MM-DD HH:mm:ss')
})


// 滚动事件处理函数
const handleScroll = () => {
	console.log('scrool')
	const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
	// 判断是否滚动到底部
	if (scrollTop + clientHeight >= scrollHeight) {
		if(replies.value.length < replieTotal.value){
			repliesParams.page++
			getReplyList()
		}
	}
};

onMounted(() => {
	// 组件挂载时绑定滚动事件
	window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
	// 组件卸载时解绑滚动事件
	window.removeEventListener('scroll', handleScroll);
});
</script>
<style scoped lang="scss">
.topic-detail{
	width: 100%;
	min-height: calc(100vh - 60px);
	padding: 20px 0;
	position: relative;
	.container{
		width: 60%;
		margin: 0 auto 20px auto;
		.topic-detail-title{
			height: 50px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30px;
			font-weight: bold;

		}
		.info-bar{
			display: flex;
			align-items: center;
			justify-content: space-between;
			cursor: pointer;
			margin-bottom: 20px;
		}

		.subtitle{
			color: #303133;
			font-size: 16px;
			font-weight: 600;
		}
	}
}

.userInfo{
	width: 300px;
	position: fixed;
	top: 80px;
	right: 50px;
}
</style>
